<template>
	<view class="states" :class="getIrriStatus">{{getIrriStatusContent}}</view>
</template>

<script>
	export default {
		data(){
			return {
			}
		},
		computed:{
			getIrriStatus(){
				return this.state ? 'starting' : 'stoping'
			},
			getIrriStatusContent(){
				return this.state ? '启动中' : '停止中'
			}
		},
		props:{
			state: {
				type: Boolean,
				required: true
			}
		}
	}
</script>

<style scoped>
.states{
	width: 137.16rpx;
	height: 41.03rpx;
	border-radius: 11.72rpx;
	
	text-align: center;
	font-size: 21.1rpx;
	font-weight: 400;
	color: #FFFFFF;
	line-height: 41.03rpx;
}
.starting{
	background: #1D786C;
}
.stoping{
	background: #C62749;
}
</style>
